<template>
  <view class="container">
    <view class="manager-detail-box">
      <view class="manager-detail-header">
        <view class="manager-detail-header-title"> {{ detailList.licenseNo || '-' }} </view>
        <view class="manager-detail-header-subTitle">{{ detailList.modelName }}</view>
        <image src="/static/images/car-info.png" class="image" />
      </view>
      <view class="link-box">
        <view class="link-item" v-for="item in linkList" :key="item" @click="() => onLinkTo(item)"> {{ item.name }} </view>
      </view>
      <ve-card title="车辆基本信息">
        <ve-cell label="车辆状态">{{ detailList.operateStatusName || '-' }}</ve-cell>
        <ve-cell label="归属门店">{{ detailList.siteName || '-' }}</ve-cell>
        <ve-cell label="归属车场">{{ detailList.libraryName || '-' }}</ve-cell>
        <ve-cell label="车辆来源">
          <view class="manager-detail-content-item">
            <view class="manager-detail-content-item-value">
              {{ detailList.sourceName }}
              <view class="icon-box" @click="onViewClick">
                {{ visiable ? '展开' : '收起' }}
                <ve-icon v-if="visiable" style="margin-left: 8rpx" name="arrow_bottom_1" size="28" />
                <ve-icon v-else style="margin-left: 8rpx" name="arrow_top_1" size="28" />
              </view>
            </view>
          </view>
        </ve-cell>
        <view class="more-info-box" v-if="!visiable">
          <view class="page-tit">结算信息</view>
          <view class="more-item">
            <view class="more-item-label">是否分期</view>
            <view class="more-item-value">{{ contractData?.useInstallmentName }}</view>
          </view>
          <view v-if="[1, 3, 4].includes(detailList.source)">
            <view v-if="contractData.useInstallment == 1">
              <view class="more-item">
                <view class="more-item-label">购车日期</view>
                <view class="more-item-value">{{ contractData?.purchaseCarDate || '-' }}</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">购置税</view>
                <view class="more-item-value">{{ contractData?.purchaseTax || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">首付</view>
                <view class="more-item-value">{{ contractData?.initialAmount || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">尾款</view>
                <view class="more-item-value">{{ contractData?.balanceAmount || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">过户费</view>
                <view class="more-item-value">{{ contractData?.transferFee || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">运输费</view>
                <view class="more-item-value">{{ contractData?.transportationFee || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">保证金</view>
                <view class="more-item-value">{{ contractData?.earnestMoney || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">手续费</view>
                <view class="more-item-value">{{ contractData?.serviceChargeFee || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">期数</view>
                <view class="more-item-value">{{ contractData?.lnstalmentNum || '-' }}期</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">每期金额</view>
                <view class="more-item-value">{{ contractData?.amountPerPeriod || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">第一期付款日</view>
                <view class="more-item-value">{{ contractData?.lnstalmentFirstDate || '-' }}</view>
              </view>
              <view class="form-operation">
                <div class="all-count">
                  合计：<span class="num">{{ contractData?.contractAmount }}<span class="unit">元</span></span>
                </div>
                <view class="plan-button" @click="onPlanClick">
                  <span class="plan-button-text">查看付款计划</span>
                </view>
              </view>
            </view>
            <view v-else>
              <view class="more-item">
                <view class="more-item-label">购车日期</view>
                <view class="more-item-value">{{ contractData?.purchaseCarDate || '-' }}</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">购置金额</view>
                <view class="more-item-value">{{ contractData?.purchaseAmount || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">购置税</view>
                <view class="more-item-value">{{ contractData?.purchaseTax || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">过户费</view>
                <view class="more-item-value">{{ contractData?.transferFee || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">运输费</view>
                <view class="more-item-value">{{ contractData?.transportationFee || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">保证金</view>
                <view class="more-item-value">{{ contractData?.earnestMoney || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">手续费</view>
                <view class="more-item-value">{{ contractData?.serviceChargeFee || '0' }}元</view>
              </view>
            </view>
          </view>
          <view v-else>
            <view v-if="contractData.useInstallment == 1">
              <view class="more-item">
                <view class="more-item-label">借入日期</view>
                <view class="more-item-value">{{ contractData?.purchaseCarDate || '-' }}</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">首付</view>
                <view class="more-item-value">{{ contractData?.initialAmount || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">尾款</view>
                <view class="more-item-value">{{ contractData?.balanceAmount || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">期数</view>
                <view class="more-item-value">{{ contractData?.lnstalmentNum || '-' }}期</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">每期金额</view>
                <view class="more-item-value">{{ contractData?.amountPerPeriod || '0' }}元</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">第一期付款日</view>
                <view class="more-item-value">{{ contractData?.lnstalmentFirstDate || '-' }}</view>
              </view>
              <view class="form-operation">
                <div class="all-count">
                  合计：<span class="num">{{ contractData?.contractAmount }}<span class="unit">元</span></span>
                </div>
                <view class="plan-button" @click="onPlanClick">
                  <span class="plan-button-text">查看付款计划</span>
                </view>
              </view>
            </view>
            <view v-else>
              <view class="more-item">
                <view class="more-item-label">借入日期</view>
                <view class="more-item-value">{{ contractData?.purchaseCarDate || '-' }}</view>
              </view>
              <view class="more-item">
                <view class="more-item-label">借调费</view>
                <view class="more-item-value">{{ contractData?.purchaseAmount || '0' }}元</view>
              </view>
            </view>
          </view>
        </view>
        <view class="more-info-box" v-if="!visiable">
          <view class="page-tit">合同信息</view>
          <view class="more-item">
            <view class="more-item-label">合同编号</view>
            <view class="more-item-value">{{ contractData?.contractNo || '-' }}</view>
          </view>
          <view class="more-item">
            <view class="more-item-label">合同开始日期</view>
            <view class="more-item-value">{{ contractData?.contractSignDate || '-' }}</view>
          </view>
          <view class="more-item">
            <view class="more-item-label">合同结束日期</view>
            <view class="more-item-value">{{ contractData?.contractEndDate || '-' }}</view>
          </view>
          <view class="more-item">
            <view class="more-item-label">合同附件</view>
            <text class="c3" v-if="contractData.contractFileId" @click="preFile(contractData?.contractFileId)">点击查看</text>
            <text v-else>-</text>
          </view>
          <view class="more-item">
            <view class="more-item-label">
              {{ detailList?.source === 2 ? '借调同行' : '汽车销售' }}
            </view>
            <view class="more-item-value">{{ contractData?.supplierName || '-' }}</view>
          </view>
          <view class="more-item">
            <view class="more-item-label">收款账号</view>
            <view class="more-item-value">{{ contractData?.receiveAccount || '-' }}</view>
          </view>
        </view>
        <ve-cell>
          <template #label>
            <ve-tooltip placement="top">
              <template #content> 车辆购置费总额=首款+尾款+（每期金额*期数） </template>
              车辆购置费总额 <ve-icon name="headertipsgray" width="36" height="36" />
            </ve-tooltip>
          </template>
          <view>{{ detailList.purchaseTotalAmount || '0' }}元</view>
        </ve-cell>
        <ve-cell label="车辆颜色">{{ detailList.carColor || '-' }}</ve-cell>
        <ve-cell label="GPS设备">
          <view v-if="!detailList.vehicleList"> - </view>
          <view v-else class="manager-detail-content-tmp" v-for="item in detailList.vehicleList" :key="item.id">
            {{ item.vehicleSelectStr }}
          </view>
        </ve-cell>
      </ve-card>

      <ve-card title="行驶证信息">
        <ve-cell label="行驶证照片" layout="vertical">
          <view class="flex mt-8 justify-between">
            <ve-upload disabled v-model="detailList.driveImgFrontFileId" :once="false"></ve-upload>
            <ve-upload disabled v-model="detailList.driveImgBackFileId" :once="false"></ve-upload>
            <ve-upload disabled v-model="detailList.carHeadFileId" :once="false"></ve-upload>
          </view>
        </ve-cell>
        <ve-cell label="车架号">{{ detailList.vin || '-' }}</ve-cell>
        <ve-cell label="车牌颜色">
          {{ detailList.licenseNoColorName || '-' }}
        </ve-cell>
        <ve-cell label="发动机号">{{ detailList.engineNum || '-' }}</ve-cell>
        <ve-cell label="品牌车型">
          {{ detailList.brandModel || '-' }}
        </ve-cell>
        <ve-cell label="注册日期">{{ detailList.registerDateStr || '-' }}</ve-cell>
        <ve-cell label="发证日期">
          {{ detailList.issuanceDate || '-' }}
        </ve-cell>
        <ve-cell label="行驶证所属人姓名">{{ detailList.driveNatureOwner || '-' }}</ve-cell>
        <ve-cell label="住址">{{ detailList.drivingAddress || '-' }}</ve-cell>
        <ve-cell label="使用性质">{{ detailList.driverUseNature || '-' }}</ve-cell>
        <ve-cell label="外廓尺寸">
          {{ detailList.length || '-' }} x {{ detailList.width || '-' }} x {{ detailList.height || '-' }} 毫米
        </ve-cell>
        <ve-cell label="核定载人数"> {{ detailList.ac || '-' }} 人 </ve-cell>
        <ve-cell label="总质量"> {{ detailList.grossMass || '-' }} kg </ve-cell>
        <ve-cell label="整备质量"> {{ detailList.unladenMass || '-' }} kg </ve-cell>
        <ve-cell label="车辆类型"> {{ detailList.driverCarType || '-' }} </ve-cell>
      </ve-card>

      <ve-card title="运维信息">
        <ve-cell label="年检证">
          <preview-button title="查看年检证" :fileId="detailList.inspectionFileId" />
        </ve-cell>
        <ve-cell label="年检有效期至">
          <warnDataShow type="date" :value="detailList.planTime" :record="detailList" />
        </ve-cell>
        <ve-cell label="商业险保单">
          <preview-button title="查看商业险保单" :fileId="detailList.businessFileId" />
        </ve-cell>
        <ve-cell label="商业险到期日">
          <warnDataShow type="date" :value="detailList.businessEndDate" :record="detailList" />
        </ve-cell>
        <ve-cell label="交强险保单">
          <preview-button title="查看交强险保单" :fileId="detailList.compulsoryFileId" />
        </ve-cell>
        <ve-cell label="交强险到期日">
          <warnDataShow type="date" :value="detailList.compulsoryEndDate" :record="detailList" />
        </ve-cell>
        <ve-cell label="车辆当前行驶里程">{{ unitVal(detailList?.totalMileage, '公里') }}</ve-cell>
        <ve-cell label="下次保养里程">
          <warnDataShow type="mileage" :value="detailList.estimatedKilometre" :record="detailList" />
        </ve-cell>
        <ve-cell label="下次保养日期">
          <warnDataShow type="date" :value="detailList.estimatedTime" :record="detailList" />
        </ve-cell>
      </ve-card>

      <ve-card title="车载BOX设备信息" v-if="supplierDetails.config?.tboxEnabled === 1">
        <ve-cell label="设备状态">{{ detailList.tboxEquipmentStatusName || '-' }}</ve-cell>
        <ve-cell label="车载BOX车辆当前公里数">{{ detailList.tboxCurrentMileage ? detailList.tboxCurrentMileage : '-' }} 公里 </ve-cell>
        <ve-cell label="车载BOX车辆当前油(电)量">{{ detailList.tboxCurrentOil ? detailList.tboxCurrentOil : '-' }} </ve-cell>
        <ve-cell label="设备供应商">{{ detailList.tboxVehicleFirm || '-' }}</ve-cell>
      </ve-card>

      <ve-card title="ETC设备信息" v-if="supplierDetails.config?.hrhcEtcEnabled === 1 || supplierDetails.config?.quantumEtcEnabled == 1">
        <template #status>
          <ve-tag
            class="card__status"
            :color="getEtcCorlor(detailList)"
            v-if="detailList.etcSourceName"
            :title="detailList.etcSourceName"
          ></ve-tag>
        </template>
        <ve-cell label="设备是否激活">{{ detailList.etcEquipmentActivationName || '-' }}</ve-cell>
        <ve-cell label="ETC设备号">{{ detailList.etcEquipmentNo || '-' }}</ve-cell>
        <ve-cell label="ETC卡号">{{ detailList.etcCardNo || '-' }}</ve-cell>
        <ve-cell label="设备是否在线">{{ detailList.etcEquipmentOnLineName || '-' }}</ve-cell>
        <ve-cell label="硬件连接状态">{{ detailList.etcHardwareStatusName || '-' }}</ve-cell>
        <ve-cell label="设备工作状态">{{ detailList.etcWorkStatusName || '-' }}</ve-cell>
      </ve-card>
    </view>
  </view>
  <ve-bottom-box size="mini" v-if="detailList.hrhcSyncStatus !== 10 && query.from !== 'car-return' && query.from !== 'car-disposal'">
    <ve-button type="primary" size="long" @click="navigatorAdd">编辑</ve-button>
  </ve-bottom-box>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import { getCarDetail } from '@/api/asset/car-manager'
  import { unitVal } from '@/utils'
  import dayjs from 'dayjs'
  import warnDataShow from './warn-data-show.vue'
  import { getFile, getEnterpriseDetail } from '@/api/common'
  import { packagedSetUrlQuery } from '@/utils/upload-tool'
  import PreviewButton from '@/components/preview-button.vue'

  const tmpId = ref()
  const visiable = ref(false)
  const contractData = ref<any>({})
  const detailList = ref<any>({})
  const linkList = ref<any>([
    // {
    //   name: '订单信息',
    //   link: '',
    // },
    {
      name: '费用信息',
      link: `/pages/asset/car-manager/fee-info`,
    },
    {
      name: '违章记录',
      link: '/pages/asset/car-manager/detail/violation-record',
    },
    {
      name: '保养记录',
      link: '/pages/asset/car-maintenance/list',
    },
    {
      name: '维修记录',
      link: '/pages/asset/car-manager/detail/repair-record',
    },
    {
      name: '年检记录',
      link: '/pages/asset/car-inspect/list',
    },
    {
      name: '商业险',
      link: '/pages/asset/car-manager/detail/business-insure-info',
    },
    {
      name: '交强险',
      link: '/pages/asset/car-manager/detail/jq-insure-info',
    },
    {
      name: '里程记录',
      link: '/pages/asset/car-manager/detail/mileage-record',
    },
  ])

  const getEtcCorlor = (item) => {
    switch (Number(item.etcSource)) {
      case 1:
        return 'orange'
      case 2:
        return 'blue'
      default:
        return 'blue'
    }
  }

  const onPlanClick = () => {
    setTimeout(() => {
      uni.$emit('viewContractInfoNoId', {
        contractStatus: 'detail',
        businesCode: contractData.value.purchaseNo || '',
        id: contractData.value.id,
      })
    }, 100)
    uni.navigateTo({ url: `/pages/asset/car-manager/form/components/bill-plan` })
  }

  const onLinkTo = (item: any) => {
    uni.navigateTo({
      url: `${item.link}?id=${detailList.value.id}&from=${query.value.from}`,
    })
  }

  const onViewClick = () => {
    visiable.value = !visiable.value
  }

  const navigatorAdd = () => {
    uni.navigateTo({
      url: `/pages/asset/car-manager/form/index?id=${detailList.value.id}&from=detail`,
    })
  }

  const getInfo = (id: string) => {
    getCarDetail({ id }).then((res: any) => {
      const result = res.result
      // 接口返回的图片地址拼接上查询参数
      if (result.inspectionFileUrls && result.inspectionFileUrls.length > 0) {
        result.inspectionFileUrls.forEach((e: any, index: number) => {
          result.inspectionFileUrls[index] = packagedSetUrlQuery(e)
        })
      }
      // GPS设备列表
      if (result.vehicleList && result.vehicleList.length > 0) {
        result.vehicleStrList = result.vehicleList.map((e: any) => {
          return e.vehicleSelectStr
        })
        result.vehicleStrList = result.vehicleStrList.join(' | ')
      }
      result.maintenanceTime = result.maintenanceTime ? dayjs(result.maintenanceTime).format('YYYY-MM-DD') : '-'
      result.driveImgFrontFileId = result.driveImgFrontFileId ? [result.driveImgFrontFileId] : []
      result.driveImgBackFileId = result.driveImgBackFileId ? [result.driveImgBackFileId] : []
      result.carHeadFileId = result.carHeadFileId ? [result.carHeadFileId] : []
      result.etcEquipmentNo = result.etcEquipmentNo || '无设备'
      result.etcCardNo = result.etcCardNo || '无设备'
      detailList.value = result
      contractData.value = result?.contractCarPurchaseEditVo
    })
  }

  const supplierDetails = ref<any>({})
  // 获取商户信息
  const getSupplierInfo = () => {
    getEnterpriseDetail().then((res: any) => {
      const result = res.result
      supplierDetails.value = result
    })
  }

  const query = ref<any>({})
  onLoad((options: any) => {
    console.log('onload', options)
    query.value = options
    getSupplierInfo()
    if (options.id) {
      tmpId.value = options.id
      getInfo(options.id)
    }
    uni.$on('carDetail_refresh', function (data) {
      getInfo(options.id)
    })
  })
  onUnload(() => {
    uni.$off('carDetail_refresh')
  })

  // 预览图片
  const doPreviewImage = (lists: any[]) => {
    uni.previewImage({
      urls: lists,
      success: () => {
        console.log('预览图片成功')
      },
      fail: () => {
        uni.showToast({
          title: '预览图片失败',
          icon: 'none',
        })
      },
    })
  }

  const preFile = async (policyImgFileId: any) => {
    var res: any = await getFile({ idList: [policyImgFileId] })
    console.log(JSON.stringify(res))
    if (res.code == 200) {
      var url = res.result[0].openUrl
      if (url.indexOf('pdf') > -1 || url.indexOf('word') > -1) {
        uni.showLoading({
          title: '正在下载...',
        })
        uni.downloadFile({
          url: url,
          success: function (res) {
            if (res.statusCode === 200) {
              // 下载成功
              uni.hideLoading()
              const filePath = res.tempFilePath // 下载后的临时文件路径
              uni.saveFile({
                tempFilePath: filePath,
                success: function () {
                  //此API是为了拿到文件保存的详细路径
                  plus.io.requestFileSystem(
                    plus.io.PRIVATE_DOC,
                    function (fs) {
                      // 拿到 _doc 所在的完整路径
                      console.log(fs.root.fullPath)
                      //弹出文件保存路径
                    },
                    function (e) {
                      console.log('Request file system failed: ' + e.message)
                    },
                  )
                  //保存成功后,调用文件打开方法
                  uni.openDocument({
                    filePath,
                    success: function (file) {
                      console.log('file-success', file)
                    },
                  })
                },
                fail: function () {
                  // 保存文件失败
                  uni.showToast({
                    title: '保存文件失败',
                    icon: 'none',
                  })
                },
              })
            } else {
              // 下载失败
              uni.showToast({
                title: '下载失败',
                icon: 'none',
              })
            }
          },
          fail: function () {
            // 下载请求失败
            uni.showToast({
              title: '下载请求失败',
              icon: 'none',
            })
          },
        })
      } else {
        uni.previewImage({
          urls: [url],
        })
      }
    }
  }
</script>
<style scoped lang="less">
  :deep(.ve_tooltip_content) {
    display: block;
  }
  .card__status {
    margin-left: 16rpx;
  }
  .check-btn {
    color: #3072f6;
    text-decoration: underline;
    font-size: 28rpx;
    font-weight: 400;
    margin-left: 10rpx;
  }
  .container {
    height: auto;
    background-color: #f7f8fa;
  }

  .flex {
    display: flex;
  }

  .mt-8 {
    margin-top: 16rpx;
  }

  .item-column {
    flex-direction: column;
  }

  .justify-between {
    justify-content: space-between;
  }

  .manager-detail-box {
    height: auto;
    padding: 24rpx 24rpx;

    .manager-detail-header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 168rpx;
      padding: 32rpx 32rpx;
      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 24rpx;
      position: relative;

      .image {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }

      &-title {
        font-size: 40rpx;
        font-weight: 600;
        z-index: 1;
      }

      &-subTitle {
        z-index: 1;
      }
    }

    .manager-detail-content-item {
      width: 100%;
      display: flex;
      margin-bottom: 32rpx;

      &:last-child {
        margin-bottom: 0rpx;
      }

      &-label {
        width: 180rpx;
        flex-shrink: 0;
        margin-right: 20rpx;
        color: #8491a8;
      }

      &-value {
        flex: 1;
        display: flex;
        justify-content: space-between;

        .icon-box {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-weight: 400;
          color: #3072f6;
        }
      }
    }

    .more-info-box {
      padding: 32rpx 24rpx;
      background: #f7f8fa;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #191c27;
      margin-bottom: 32rpx;

      .more-item {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: 400;
        color: #191c27;
        margin-bottom: 32rpx;

        &:last-child {
          margin-bottom: 0rpx;
        }

        &-value {
          word-break: break-word;
        }

        &-label {
          width: 180rpx;
          flex-shrink: 0;
          margin-right: 20rpx;
          color: #8491a8;
        }

        &-link {
          color: rgba(48, 114, 246, 1);
        }
      }
    }

    .manager-detail-content-tmp {
      margin-top: 16rpx;
      padding: 32rpx 24rpx;
      background: #f7f8fa;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #191c27;
    }
  }

  .item-isInstallment {
    background: #eff0f2;
    padding: 32rpx 24rpx;
    margin-bottom: 32rpx;
  }

  .link-box {
    margin-top: 24rpx;
    display: flex;
    flex-wrap: wrap;

    .link-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 151rpx;
      height: 66rpx;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      border: 2rpx solid #165dff;
      font-size: 30rpx;
      font-weight: 400;
      color: #165dff;
      text-align: center;
      margin-right: 32rpx;
      margin-bottom: 24rpx;

      &:nth-child(4n) {
        margin-right: 0rpx;
      }
    }
  }

  .ve-bottom-box {
    height: 132rpx;
  }
  .page-tit {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #191c27;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 16rpx;
  }
  .form-operation {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 32rpx 0;
    border-top: 2rpx solid #d8d8d8;
    .all-count {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #1e1e1e;
      text-align: right;
      font-style: normal;
      text-transform: none;
      width: 100%;
      margin-bottom: 32rpx;
      .num {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 48rpx;
        color: #fe615a;
        line-height: 48rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        .unit {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #fe615a;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-left: 8rpx;
        }
      }
    }
    .plan-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 64rpx;
      background: #f3f7ff;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      border: 2rpx solid #3072f6;
      padding: 18rpx 0;
      .plan-button-text {
        font-size: 28rpx;
        font-weight: 400;
        color: #3072f6;
        margin-left: 18rpx;
      }
    }
  }
</style>
